import * as React from 'react';
import CityList from './cityList';
import Suggest from './suggest';
// import type { Section } from './types';
import { EnvironmentOutline } from 'antd-mobile-icons';
import useCity from './useCity';
import { useNavigate } from 'react-router-dom';

import './index.module.scss';
const { useState, useCallback, useMemo, memo } = React;

interface CitySelectorProps {
  show: boolean;
  currentDir: string;
  onSelect: (val: string) => void;
}
const hotCitys = [
  '北京',
  '上海',
  '武汉',
  '广州',
  '深圳',
  '南京',
  '杭州',
  '西安',
  '郑州',
  '成都',
  '长沙',
  '天津',
];
function CitySelector(props: CitySelectorProps) {
  const { show, onSelect } = props;

  const [searchKey, setSearchKey] = useState('');
  const [showFullCity, setShowFullCity] = useState(false);
  const { cityData, isLoading, error } = useCity(show);

  const searchVal = useMemo(() => searchKey.trim(), [searchKey]);
  const navigate = useNavigate();

  // 楼层效果
  const toAlpha = useCallback((alpha: string) => {
    const target = document.querySelector(
      `[data-cate='${alpha}']`
    ) as HTMLDivElement;
    if (target && target.parentNode && target.parentNode.parentNode) {
      (target.parentNode.parentNode as HTMLDivElement).scrollTop =
        target.offsetTop;
    }
  }, []);

  const outputCitySections = () => {
    if (isLoading) {
      return <div>loading</div>;
    }

    if (cityData) {
      return (
        <CityList
          sections={cityData.cityList}
          onSelect={onSelect}
          toAlpha={toAlpha}
        />
      );
    }
    if (error) {
      return <div>获取城市数据错误</div>;
    }
    return null;
  };

  return (
    <div styleName={show ? 'city-selector' : 'city-selector hidden'}>
      {!showFullCity && (
        <>
          <div styleName="city-search">
            <div
              styleName="search-back"
              onClick={() => {
                navigate(-1);
              }}
            >
              <svg width="42" height="42">
                <polyline
                  points="25,13 16,21 25,29"
                  stroke="#fff"
                  strokeWidth="2"
                  fill="none"
                />
              </svg>
            </div>
            <div styleName="search-input-wrapper">
              <input
                type="text"
                value={searchKey}
                styleName="search-input"
                placeholder="城市、车站的中文或拼音"
                onChange={(e) => setSearchKey(e.target.value)}
              />
            </div>
            <i
              onClick={() => setSearchKey('')}
              styleName={
                searchVal.length === 0 ? 'search-clean hidden' : 'search-clean'
              }
            >
              &#xf063;
            </i>
          </div>
          <div className="mgb10 mgt10 mgr10 mgl10 fn16" styleName="location">
            当前定位：
            <EnvironmentOutline color="#76c6b8" fontSize={16} />{' '}
            {(window as any).currentCity}
          </div>
          <div styleName="hot-city-items">
            <div styleName="title" className="mgb10">
              热门
            </div>
            <div styleName="hot-citys">
              {hotCitys.map((item) => {
                return (
                  <div
                    key={item}
                    styleName="city-item"
                    onClick={() => onSelect(item)}
                  >
                    {item}
                  </div>
                );
              })}
            </div>
          </div>
        </>
      )}
      {Boolean(searchVal) && (
        <Suggest searchKey={searchVal} onSelect={onSelect} />
      )}
      <div styleName="city-index-wrap">{outputCitySections()}</div>
    </div>
  );
}

export default memo(CitySelector);
